<template>
  <div class="my">
    <div class="avatar_box">
      <el-avatar
        size="large"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      />
      <span class="name">admin</span>
    </div>
    <ul class="nav_box">
      <li class="nav_li" @click="handleClick('registerAccount')">
        <span
          ><img
            class="icon left_icon"
            src="@/assets/images/zhuce_icon.png"
            alt=""
          />注册账号</span
        >
        <img class="icon" src="@/assets/images/right_icon.png" alt="" />
      </li>
      <li class="nav_li" @click="handleClick('changePassword')">
        <span
          ><img
            class="icon left_icon"
            src="@/assets/images/password_icon.png"
            alt=""
          />修改密码</span
        >
        <img class="icon" src="@/assets/images/right_icon.png" alt="" />
      </li>
      <!-- <li class="nav_li" @click="handleClick('verificationByPhone')">
        <span
          ><img
            class="icon left_icon"
            src="@/assets/images/phone_icon.png"
            alt=""
          />手机验证</span
        >
        <img class="icon" src="@/assets/images/right_icon.png" alt="" />
      </li> -->
    </ul>
    <el-button class="loginOut" size="large" @click="loginOut"
      >退出登录</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"

const $router = useRouter()

const handleClick = (value) => {
  switch (value) {
    case "registerAccount":
      $router.push({ path: "/my/registerAccount" })
      return
    case "changePassword":
      $router.push({ path: "/my/changePassword" })
      return
    case "verificationByPhone":
      $router.push({ path: "/my/verificationByPhone" })
      return
    default:
      return null
  }
}

const loginOut = () => {
  sessionStorage.clear()
  $router.push({ path: "/login" })
}
</script>

<style scoped lang="less">
@import "./styles/index.less";
</style>
